<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style>
        p#rcorners1{
            display: flex;
        }
        #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners3 {
            border-radius: 15px 50px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners4 {
            border-radius: 15px;
            background: #73AD21;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
<!--
border-radius 属性可以接受一到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：
-->
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>一个值 - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>